<template>
    <div class="left_box">
        <div class="left" :style="left"></div>
        <div class="zz" v-show="left.left=='-50%'"  @click='other'></div>
    </div>
</template>

<script>
    export default {
        data () {
            return {

            }
        },
        props:{
          left:Object
        },
        methods:{
            other:function(e){
                this.$emit('other',e)
            },
        }
    }
</script>

<style>
    .left{
        width: 100%;
        height: 100%;
        background-color: bisque;
        position: absolute;
        transition: all .2s;
        z-index: 9999;
        left: 0;
    }
    .zz{
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: rgba(0,0,0,.2);
        z-index: 888;
    }
</style>
